<!DOCTYPE html >
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <script src="lib/vue-resource-1.3.4.js"></script>
    <link href="lib/bootstrap-3.3.7.css" rel="stylesheet"/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加品牌</h3>
        </div>
        <div class="panel-body form-inline">
            <label>
                Name:
                <input type="text"  class="form-control" v-model="name"/>
            </label>
            <!--在vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了括号，就可以给函数传递参数-->
            <input type="button" value="添加" class="btn btn-primary" @click="add"/>
            <label>
                搜索关键字:
                <input type="text"  class="form-control" v-model="keywords"/>
            </label>
        </div>
    </div>
    <table class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <th>ID</th>
            <th>品牌</th>
            <th>时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!--
        之前  v-for 中的数据都是从 data 上的 list 中直接渲染过来的

        现在，我们自定义了一个search 方法，同时   把所有的关键字，通过传参的形式，传递给了search 方法

        在search 方法内部，通过执行 for 循环，把所有的符合 搜索关键字的数据，保存到 一个新数组中，返回
        -->
        <tr v-for="item in list" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{ item.time | times}}</td>
            <td>
                <!--.prevent阻止默认行为  刷新的行为-->
                <a href="#">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script>

    Vue.filter('times', function (dataStr) {
        //根据给定的时间字符串，得到特定的时间
        var dt = new Date(dataStr);
        console.log(dt);
        var y = dt.getFullYear();
        var m = dt.getMonth() + 1;
        var d = dt.getDate();

        return y+ '-' + m +'-' + d;
//        return `{y}-{m}-{d}`;

    });
    // 如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 /  ，否则 不会启用根路径做拼接；
    Vue.http.options.root = 'http://vue.studyit.io/';
    // 全局启用 emulateJSON 选项
    Vue.http.options.emulateJSON = true;


    //vue里面全部用ES6的写法  -------在这里面就必须特别注意  this  的作用域
    var vm = new Vue({
        el:'#app',
        data:{
            name:'',
            keywords:'',
            list:[//存放所有品牌列表
                {id:1, name:'宝马' ,time: new Date()},
                {id:2, name:'奔驰' ,time: new Date()}
            ]
        },
        created:function(){
            //当 VM 实例的data 和 methods  初始化完毕后，VM实例会自动执行created这个生命周期函数
            this.getAllList();
        },
        methods:{

            getAllList:function () {
                // 分析：
                // 1. 由于已经导入了 Vue-resource这个包，所以 ，可以直接通过  this.$http 来发起数据请求
                // 2. 根据接口API文档，知道，获取列表的时候，应该发起一个 get 请求
                // 3. this.$http.get('url').then(function(result){})
                // 4. 当通过 then 指定回调函数之后，在回调函数中，可以拿到数据服务器返回的 result
                // 5. 先判断 result.status 是否等于0，如果等于0，就成功了，可以 把 result.message 赋值给 this.list ; 如果不等于0，可以弹框提醒，获取数据失败！
                this.$http.get('http://vue.studyit.io/api/getprodlist').then(function (result) {
                    var result = result.body;
                   if(result.status === 0){
                       //成功获取
                       this.list = result.message;
                   }else{
                       alert('获取数据失败');
                   }
                });

//                $.post('http://vue.studyit.io/api/getprodlist',function (res) {
//                    console.info(res)
//                });
            },
            add:function () { // 添加品牌列表到后台服务器
                // 分析：
                // 1. 听过查看 数据API接口，发现，要发送一个 Post 请求，  this.$http.post
                // 2. this.$http.post() 中接收三个参数：
                //   2.1 第一个参数： 要请求的URL地址
                //   2.2 第二个参数： 要提交给服务器的数据 ，要以对象形式提交给服务器 { name: this.name }
                //   3.3 第三个参数： 是一个配置对象，要以哪种表单数据类型提交过去， { emulateJSON: true }, 以普通表单格式，将数据提交给服务器 application/x-www-form-urlencoded
                // 3. 在 post 方法中，使用 .then 来设置成功的回调函数，如果想要拿到成功的结果，需要 result.body

                /* this.$http.post('api/addproduct', { name: this.name }, { emulateJSON: true }).then(result => {
                 if (result.body.status === 0) {
                 // 成功了！
                 // 添加完成后，只需要手动，再调用一下 getAllList 就能刷新品牌列表了
                 this.getAllList()
                 // 清空 name
                 this.name = ''
                 } else {
                 // 失败了
                 alert('添加失败！')
                 }
                 }) */

                this.$http.post('api/addproduct', { name: this.name }).then(function (result) {
                    if (result.body.status === 0) {
                    // 成功了！
                    // 添加完成后，只需要手动，再调用一下 getAllList 就能刷新品牌列表了
                    this.getAllList();
                    // 清空 name
                    this.name = ''
                }else {
                    // 失败了
                    alert('添加失败！')
                }
            });

            },
            del(id) { // 删除品牌
                this.$http.get('api/delproduct/' + id).then(function (result)  {
                    if (result.body.status === 0) {
                    // 删除成功
                    this.getAllList()
                } else {
                    alert('删除失败！')
                }
            })
            }
        }
    });
</script>
</body>
</html>